<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
	float fFreeMemory=(float)Runtime.getRuntime().freeMemory();
	float fTotalMemory=(float)Runtime.getRuntime().totalMemory();
	float fUsedMemory = fTotalMemory - fFreeMemory;
	float fPercent=fFreeMemory/fTotalMemory*100;

	class EnvServlet
	{
		public long timeUse=0;
		public Hashtable htParam=new Hashtable();
		private Hashtable htShowMsg=new Hashtable();
		public void setHashtable()
	{
		Properties me=System.getProperties();
		Enumeration em=me.propertyNames();
		while(em.hasMoreElements()){
			String strKey=(String)em.nextElement();
			String strValue=me.getProperty(strKey);
			htParam.put(strKey,strValue);
		}
	}	
	public String queryHashtable(String strKey)
	{
		strKey=(String)htParam.get(strKey);
		return strKey;
	}
}

	EnvServlet env=new EnvServlet();
	env.setHashtable();
	String action=new String(" ");
	String act=new String("action");
	if(request.getQueryString()!=null&&request.getQueryString().indexOf(act,0)>=0)action=request.getParameter(act);
%>
<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <title>OrangePi 系统信息</title>
	<meta name="viewport" content="width=device-width,target-densitydpi=high-dpi,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
	<jsp:include page="/comm/link.jsp" />
	
  </head>
  <body>
	<jsp:include page="/comm/header.jsp" />

	<div class="container" id="main">
		<div class="row">
			<div class="col-md-6">
				<div class="panel panel-success">
			 		<div class="panel-heading">
			 			<h3 class="panel-title">Linux系统信息</h3>
			 		</div>
			 			<ul class="list-group">
					 		<li class="list-group-item">服务器名：<%= request.getServerName() %>  [<%=request.getRemoteAddr()%>]</li>
					 		<li class="list-group-item">操作系统：<%=env.queryHashtable("os.name")%> <%=env.queryHashtable("os.version")%> 
				             	 <%=env.queryHashtable("sun.os.patch.level")%> / <%=env.queryHashtable("os.arch")%>
				             	 ,<%=env.queryHashtable("sun.arch.data.model")%>位
				              </li>
				             <li class="list-group-item">当前用户：<%=env.queryHashtable("user.name")%></li>
				              <li class="list-group-item">服务器语言：<%=env.queryHashtable("user.language")%></li>
				              <li class="list-group-item">服务器时间：<%=new java.util.Date()%> / <%=env.queryHashtable("user.timezone")%></li>
				 			  <li class="list-group-item">
				 			  	<p>系统内存：</p>
				 			  	<div class="setFree"></div>
				 			  </li>
				 			  <li class="list-group-item">
				 			  	<p>磁盘使用率：</p>
				 			  	<div class="setDisk"></div>
				 			  	<p></p>
				 			  </li>
				 		</ul>
	 			</div>
			</div>
			
			<div class="col-md-6">
				<div class="panel panel-info">
			 		<div class="panel-heading">
			 			<h3 class="panel-title">CPU使用率(%)</h3>
			 		</div>
			 			<div id="container2" style="height: 280px;"></div>
			 			<p class="text"><span class="point"></span>CPU使用率(%)</p>
			 		</div>
			</div>
			
			<div class="col-md-6">
				<div class="panel panel-info">
			 		<div class="panel-heading">
			 			<h3 class="panel-title">CPU温度(℃)</h3>
			 		</div>
			 			<div id="container" style="height: 238px;"></div>
			 			<p class="text"><span class="point"></span>CPU温度(℃)</p>
			 		</div>
			</div>
			
		</div>
	</div>	

	<jsp:include page="comm/footer.jsp" />
	
  <script>
  		$(document).ready(function() {         
  			
  			addActiveNav('系统概览');
  			
  			var html1= getMsg('free');
			$(".setFree").html(html1);
			
  			var html2 = getMsg('disk');
			$(".setDisk").html(html2);
			
  			//每20s 刷新内存
  			setInterval(function() {                                    
  				$(".setFree").html(getMsg('free'));
  			 },20000);     
  			
  			setInterval(function() {                                    
  				$(".setDisk").html(getMsg('disk'));
  			 },60*1300);     
  			
  			Highcharts.setOptions({                                                     
  				global: {                                                               
  					useUTC: false                                                       
  				}                                                                       
  			});    
  			
  			                                                                 
  			var chart = $('#container').highcharts({                                                
  				chart: {                                                                
  					type: 'spline',                                                     
  					animation: Highcharts.svg, // don't animate in old IE               
  					marginRight: 10,                                                    
  					events: {                                                           
  						load: function() {         
  							// set up the updating of the chart each second             
  							var series = this.series[0];                                
  							setInterval(function() {                                    
  								var x = (new Date()).getTime() ;// current time         
  								$.get("<%=path%>/comm/commAction?m=temp",function(resp){
  										//异步获取Cpu温度	
  										var s =  parseFloat(resp);
  										var t = parseFloat(25);
  										if(s<t) s=t;
  										series.addPoint([x, s], true, true);      
  									});
  								                
  							}, 2500);                                                   
  						}                                                               
  					}                                                                   
  				},                                                                      
  				title: {                                                                
  					text: null,                                            
  				},                                                                      
  				xAxis: {                                                                
  					type: 'datetime',                                                   
  					tickPixelInterval: 100                                              
  				},                                                                      
  				yAxis: {                                                                
  					title: {                                                            
  						text: null,                                                   
  					},       
  					tickPositions: [20,30, 40, 50, 60,70,80,90],
  					plotLines: [{                                                       
  						value: 0,                                                       
  						width: 1,                                                       
  						color: '#808080'                                                
  					}]                                                                  
  				},                                                                      
  				tooltip: {                                                              
  					formatter: function() {                                             
  							return '<b>'+ this.series.name +'</b><br/>'+                
  							Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) +'<br/>'+
  							Highcharts.numberFormat(this.y, 2);                         
  					}                                                                   
  				},                                                                      
  				legend: {                                                               
  					enabled: false                                                      
  				},                                                                      
  				exporting: {                                                            
  					enabled: false                                                      
  				},                                                                      
  				series: [{                                                              
  					name: 'cpu温度',                                                
  					data: (function() {                                                 
  						// generate an array of random data                             
  						var data = [],                                                  
  							time = (new Date()).getTime(),                              
  							i;                                                          
	  						for (i = -10; i <= 0; i++) {                                    
	  							data.push({                                                 
	  								x: time + i * 2000,                                     
	  								y:20                            
	  							});        
	  						}                                                               
  						return data;                                                    
  					})()                                                                
  				}]                                                                      
  			});            
  			
  			
  			var chart2 = $('#container2').highcharts({                                                
  				chart: {                                                                
  					type: 'spline',                                                     
  					animation: Highcharts.svg, // don't animate in old IE               
  					marginRight: 10,                                                    
  					events: {                                                           
  						load: function() {                                              
  							// set up the updating of the chart each second             
  							var series = this.series[0];                                
  							setInterval(function() { 
  							//异步获取Cpu使用率	
  								var x = (new Date()).getTime();
	  							$.get("<%=path%>/comm/commAction?m=cpu",function(resp){
										series.addPoint([x, parseFloat(resp)], true, true);      
									});
  							}, 5000);   
  						}                                                               
  					}                                                                   
  				},                                                                      
  				title: {                                                                
  					text: null,                                            
  				},                                                                      
  				xAxis: {                                                                
  					type: 'datetime',                                                   
  					tickPixelInterval: 100                                             
  				},                                                                      
  				yAxis: {                                                                
  					title: {                                                            
  						text: null,                                                   
  					},       
  					tickPositions: [ 0 , 5 , 10 ,15  , 20 , 25 , 30 , 35 , 40 , 45 , 50 , 55 , 60 ,65 ,70],
  					plotLines: [{                                                       
  						value: 0,                                                       
  						width: 1,                                                       
  						color: '#808080'                                                
  					}]                                                                  
  				},                                                                      
  				tooltip: {                                                              
  					formatter: function() {                                             
  							return '<b>'+ this.series.name +'</b><br/>'+                
  							Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) +'<br/>'+
  							Highcharts.numberFormat(this.y, 2);                         
  					}                                                                   
  				},                                                                      
  				legend: {                                                               
  					enabled: false                                                      
  				},                                                                      
  				exporting: {                                                            
  					enabled: false                                                      
  				},                                                                      
  				series: [{                                                              
  					name: 'cpu使用率(%)',                                                
  					data: (function() {                                                 
  						// generate an array of random data                             
  						var data = [],                                                  
  							time = (new Date()).getTime(),                              
  							i;                                                          
	  						for (i = -10; i <= 0; i++) {                                    
	  							data.push({                                                 
	  								x: time + i * 2000,                                     
	  								y:5 ,                           
	  							});        
	  						}                                                               
  						return data;                                                    
  					})()                                                                
  				}]                                                                      
  			});        
  		});                                                                             
  			
			function getMsg(type){
				var _url = "<%=path%>/comm/commAction?m="+type;
				var s=null;
				$.ajax({
					url:_url,
					async: false,
					success:function(resp){
						s = resp;
				  	},
			    });
				return s;
			}
  	</script>
	  
  </body>
</html>
